<template>
  <div class="dashboard-page">
    <div class="top">
      <TopNavber
        @eidtPass="eidtPass"
        @logout="logoutFun"
        :userName="userName"
      />
    </div>
    <Tabs
      tabPosition="left"
      type="border-card"
      :tabList="appList"
      :token="token"
    />
  </div>
</template>
<script>
import {
  ref,
  reactive,
  toRefs,
  computed,
  watch,
  provide,
  getCurrentInstance,
  onMounted, //组件安装完成的钩子
  onUpdated, //组件数据更新时的钩子
  onUnmounted,
  // defineComponent, //重载组件
} from "vue";
// 引入router
import { useRouter } from "vue-router";
import { useStore } from "vuex";

import Tabs from "./components/Tabs";
import TopNavber from "./components/TopNavber";
import { logout } from "@/api/login";
import { getAppList, getHaveApp } from "@/api/app";
import { getUserName, getToken } from "@/utils/auth";

function useFeatureX() {
  // 响应式数据抽离出setup 具有代码可读性
  const state = reactive({
    appList: [],
    userName: "",
    token: getToken(),
  });
  return state;
}
// defineComponent();
export default {
  name: "Dashboard",
  components: { TopNavber, Tabs, getCurrentInstance },

  setup() {
    const router = useRouter();
    const store = useStore();
    const { ctx } = getCurrentInstance();
    provide("userName", getUserName());
    provide("token", getToken());
    // 响应式数据抽离
    const data = useFeatureX();

    //如何使用vuex的辅助函数获取vuex内存储的值
    // store.dispatch("app/getAppList");

    //我想在 computed 里去使用 mapState , 该如何串写
    // const appList = computed(() =>{} );

    // console.log(store._state)
    // console.log(app);

    const eidtPass = () => {
      router.push("/changePassword");
    };
    const logoutFun = () => {
      store.dispatch("login/logout");
    };

    const getAppListFun = async () => {
      await getAppList()
        .then((app) => {
          getHaveApp().then((res) => {
            //     // console.log(res_app.data.appIds);
            //     res.data.appList.forEach((item) => {
            //       item.app = [];
            //       res_app.data.appIds.forEach((appid) => {
            //         item.apps.forEach((items) => {
            //           if (items.id == appid) {
            //             item.app.push(items);
            //           }
            //         });
            //       });
            //     });
            //   });
            //   data.appList = res.data.appList;
            // })
            let apps = [];
            let appIds = res.data.appIds.join(",");
            app.data.appList.forEach((app_list) => {
              let apps = app_list.apps.map((item_app) => {
                if (appIds.indexOf(item_app.id) != -1) {
                  return item_app;
                }
              });
              app_list.app = apps.filter(Boolean);
            });
            data.appList = app.data.appList;
          });
        })

        .catch((err) => {});
    };
    getAppListFun();
    // onMounted(() => {
    //   store.dispatch("app/getAppList");
    // });
    // const appList = computed(() => store.state.app.appList);
    // console.log(appList);
    return {
      ...toRefs(data),
      eidtPass,
      logoutFun,
    };
  },
};
</script>

<style lang="scss">
.dashboard-page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  // .top {
  //   margin-bottom: 5px;
  // }
}
</style>
